<!doctype html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <link href="./assset/bootstrap@5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="CSS.css">

</head>
<body>
<!-- 导航条 -->
<nav class="navbar bg-primary">
    <div class="container-fluid">
        <h1><a class="navbar-brand">动态表格</a></h1>
        <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
    </div>
</nav>

<div class="container mt-4">
    <div class="row g-3 justify-content-center">
        <div class="col-12 col-md-8">

            <div class="row">
                <h1>信息添加</h1>
                <div class="col-auto">
                    <input type="text" class="form-control" placeholder="Name" id="nameInput" value="科比" required>
                </div>
                <div class="col-auto">
                    <input type="text" class="form-control" placeholder="Job" id="jobInput" value="肘击">
                </div>
                <div class="col-auto">
                    <input type="email" class="form-control" placeholder="Email" id="emailInput" value="zs@123.com">
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary" id="addBtn">添加</button>
                </div>

            </div>
        </div>
    </div>

    <div class="row justify-content-center mt-1">
        <div class="col-8 col-md-6">

            <div class="card">
                <div class="card-body">


                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">选择</th>
                            <th scope="col">姓名</th>
                            <th scope="col">职位</th>
                            <th scope="col">邮箱</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody id="dataTbody">
                        <tr>
                            <th scope="row">1</th>
                            <td><input type="checkbox"></td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td>
                                <a href="#">删除</a>
                                <a href="#">修改</a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">1</th>
                            <td><input type="checkbox"></td>
                            <td>YiYujie</td>
                            <td>LGPT</td>
                            <td>@xyz</td>
                            <td>
                                <a href="#">删除</a>
                                <a href="#">修改</a>
                            </td>
                        </tr>

                        </tbody>
                    </table>

                </div>
            </div>

        </div>
    </div>

    <div class="row justify-content-center mt-1">
        <div class="col-8 col-md-6 text-center">
            <button class="btn btn-success" id="selectAllBtn">全选</button>
            <button class="btn btn-danger" id="reverseBtn">反选</button>
            <button class="btn btn-info" id="deleteSelectBtn">删除所选</button>
            <button class="btn btn-warning" id="clearBtn">清空</button>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="empModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">修改数据</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- 在模态框内的 .modal-body 中添加以下内容 -->
            <div class="modal-body">
                <div class="mb-3">
                    <label for="editNameInput" class="form-label">姓名</label>
                    <input type="text" class="form-control" id="editNameInput" required>
                </div>
                <div class="mb-3">
                    <label for="editJobInput" class="form-label">职位</label>
                    <input type="text" class="form-control" id="editJobInput">
                </div>
                <div class="mb-3">
                    <label for="editEmailInput" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="editEmailInput">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="saveChangesBtn">修改</button>
            </div>
        </div>
    </div>
</div>
<script src="./assset/bootstrap@5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="./js/tableex.js"></script>
</body>
</html>